<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <style>
        body {
            background: url("/image/body_bg.jpg") no-repeat fixed;
            background-size: cover;
            position: fixed;
            height: 100%;
            width: 100%;
            color: cyan;
            margin: 0;
        }
        .register {
            width: 20%;
            position: relative;
            top: 40%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
        }
        .register form {
            position: relative;
            width: 75%;
            left: 9%;
        }
        .register input {
            width: 80%;
            position: relative;
            margin: 7%;
            padding: 4%;
        }
        #captchaCode {
            width: 32%;
            left: -1%;
        }
        #captchaImag {
            position: relative;
            top: 45%;
            left: -2%;
            margin-bottom: -3%;
            width: 39%;
        }
        #emailCode {
            width: 32%;
            left: -2%;
        }
        #getEmailCode {
            width: 39%;
            left: -2%;
            margin: 0;
        }
        #submit {
            background-color: cyan;
            margin: 0;
            margin-top: 5%;
            width: 92%;
        }
    </style>
</head>
<body>

<div class="register">
    <h1>register</h1>
    <form action="/register" method="post">
        <input type="text" id="email" name="email" placeholder="email">
        <input type="password" id="password" name="password" placeholder="password">
        <input type="password" id="repeatPwd" placeholder="repeat password">
        <input type="text" id="captchaCode" name="captchaCode" placeholder="captchaCode">
        <img src="/home/captcha" onclick="captcha()" id="captchaImag">
        <input type="text" id="emailCode" name="emailCode" placeholder="email verify code">
        <input type="button" id="getEmailCode" value="click to get">
        <input type="button" id="submit" value="submit">
    </form>
</div>

</body>
<script src="/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
    function captcha() {
        $("#captchaImag")[0].src = "/home/captcha?time="+new Date();
    }
    function getEmailCode() {
        var email = $("#email").val();
        $.ajax({
            url : "/home/verifyCode",
            method : "get",
            data : {
                email : email
            },
            success : function (data) {
                console.log(data);
            },
            error : function (data) {
                alert("error");
                console.log(data);
            }
        })
    }
    $("#getEmailCode").click(getEmailCode);

    function submit() {
        $.ajax({
            url : "/register",
            method : "post",
            type : "json",
            data : {
                email : $("#email").val(),
                password : $("#password").val(),
                captchaCode : $("#captchaCode").val(),
                emailCode : $("#emailCode").val()
            },
            success : function (data) {
                if(data.code == 1) {
                    alert("注册失败 " + data.mes);
                } else {
                    alert("注册成功");
                    window.location.href = "/index";
                }
            },
            error : function (data) {
                alert("未知错误 请稍后重试");
            }
        });

    }
    document.getElementById("submit").onclick = submit;
</script>
</html>